<template>
	<view class="page_liebiao1">
		<view class="yonghu" v-for="(item,index) in dataL" :key="item.id">
			<view style="display: flex;">
				<view class="touxiang">
					<u--image :showLoading="true" shape="circle" :src="item.avatar" width="40px" height="40px"></u--image>
				</view>
				<view class="name">
					<view class="u-line-1">
						{{item.nickname}}
					</view>
					<view class="">
						<u-rate count="5" v-model="item.score" size='14' activeColor='#FA3534'></u-rate>
					</view>

				</view>
				<view class="biaoqian">
				</view>
				<view class="shijian" @click="thumbsUp(item,index)">
					<view>{{item.up}}</view>
					<view class="">
						<u-icon v-if="item.uup" name="thumb-up" color="#FA3534" size="20"></u-icon>
						<u-icon v-else name="thumb-up" size="20"></u-icon>
					</view>
				</view>
			</view>
			<view style="margin-top: 5px;margin-right: 12px;">{{item.comment}}</view>
			<view v-if="item.images" class="tupian">
				<u-album :urls="item.images" multipleSize="100px"></u-album>
			</view>
			<view v-if="item.platform_appraise" class="response">
				平台评论：{{item.platform_appraise}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			dataList: Array
		},
		data() {
			return {
				dataL: []
			}
		},
		watch: {
			dataList() {
				this.dataL = JSON.parse(JSON.stringify(this.dataList))
			}
		},
		methods: {
			thumbsUp(item, index) {
				uni.$u.http.post('/shop/upcomment', {
					comment_id: item.id
				})
				item.uup = !item.uup
				if (item.uup) {
					item.up += 1
				} else {
					item.up -= 1
				}
				// this.dataList.splice(index, 1, item)
				// this.$nextTick(() => {
				// 	this.dataList.splice(index, 1, item)
				// 	// this.$set(this.dataList[index], 'uup', item.uup)
				// 	// this.$set(this.dataList[index], 'up', item.up)
				// })
				// this.$forceUpdate()
				console.log(this.dataL)
			},
			clickImg() {
				wx.previewImage({
					urls: ['https://cdn.uviewui.com/uview/album/1.jpg'],
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			}
		}

	}
</script>

<style lang="scss">
	.page_liebiao1 {
		width: 100vw;
		// height: 100vh;
		// background-color: #e8e8e8;
		padding-top: 1px;

		.tupian {
			margin-top: 10px;
			// margin-left: 10px;
		}

		.response {
			margin-top: 20px;
		}

		.shijian {
			font-size: 14px;
			display: flex;
			align-items: baseline;
			margin-top: 10px;
			color: #808080;
		}

		.pingfen {
			margin-top: 10px;
			padding-left: 10px;
		}

		.biaoqian {
			margin-top: 5px;
			padding-left: 5px;
			// width: 40%;
		}

		.name {
			width: 450rpx;
			margin-top: 5px;
			padding-left: 10px;
			font-size: 26rpx

		}

		.yonghu {
			width: 88%;
			min-height: 50rpx;
			background-color: #ffffff;
			border-radius: 10px;
			padding-top: 10px;
			padding-left: 17px;
			padding-bottom: 20rpx;
			margin-left: 4px;
			margin-top: 10px;
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
		}
	}
</style>
